<template>
  <v-row
    no-gutters
    class="d-flex justify-center align-center white hidden-lg-and-up"
    v-show="tags.length > 0"
  >
    <v-col cols="11" xl="11" lg="11" md="11" sm="12" xs="12">
      <v-tabs
        class="item_tabs"
        :hide-slider="true"
        height="40"
        show-arrows
        color="banzhuan"
        center-active
         
      >
        <v-tab v-for="(item, index) in tags" :key="index" :to="{ path: item.url }"  exact>{{
          item.name
        }}</v-tab>
      </v-tabs>
    </v-col>
    <v-col
      v-if="$vuetify.breakpoint.width >= 1024 && tags == index_tags"
      cols="1"
      class="text-center hidden-sm-and-down text-body-2 grey--text"
    >
      <nuxt-link to="/subscribe" class="text-decoration-none grey--text">
        标签管理
      </nuxt-link>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: 'Tags',
  data: () => ({
    url: '',
    tags: [],
    index_tags: [
      {
        id: 1,
        name: '电鸭',
        url:"1"
      },
      {
        id: 2,
        name: '画师联盟',
        url:"2"

      },
      {
        id: 3,
        name: '云队友',
        url:"3"

      },
      {
        id: 4,
        name: '小蜜蜂',
        url:"4"

      },
    ],
    mistalk_tags: [
      {
        id: 0,
        name: '推荐',
        url:"5"

      },
      {
        id: 1,
        name: '热门',
        url:"6"

      },
      {
        id: 2,
        name: '关注',
        url:"7"

      },
      {
        id: 3,
        name: '上班摸鱼',
        url:"8"

      },
      {
        id: 4,
        name: '内推招聘',
        url:"9"

      },
      {
        id: 5,
        name: '一图胜千言',
        url:"10"

      },
      {
        id: 6,
        name: '今天学到了',
        url:"11"

      },
      {
        id: 7,
        name: '树洞一下',
        url:"12"

      },
      {
        id: 8,
        name: '每日算法题',
        url:"13"

      },
      {
        id: 9,
        name: '开发工具',
        url:"14"

      },
      {
        id: 10,
        name: '更多话题+',
        url:"15"

      },
    ],
    subscribe_tags: [
      {
        id: 1,
        name: '已关注标签',
        url:"/subscribe"

      },
      {
        id: 2,
        name: '全部标签',
        url:"subscribe?query=all"

      },
    ],
    homepage_tags: [],
    edituserinfo_tags: [],
    setting_tags: [],
    talkdetail_tags: [],
    about_tags: [],
    notification_tags: [
      {
        id: 1,
        name: '评论消息',
        url:"/notify"
      },
      {
        id: 2,
        name: '点赞消息',
        url:"/notify/thumbs"
      },
      {
        id: 3,
        name: '关注消息',
        url:"/notify/focus"
      },
      {
        id: 4,
        name: '系统消息',
        url:"/notify/system"
      },
    ],
  }),
  watch: {
    $route: {
      handler(val) {
        console.log(val.path)
        this.initTags(val.path)
      },
    },
  },
  created() {
    this.url = this.$route.path
    this.initTags(this.url)
  },
  methods: {
    initTags(path) {
      switch (path) {
        case '/':
          this.tags = this.index_tags
          break
        case '/mistalk':
          this.tags = this.mistalk_tags
          break
        case '/subscribe':
          this.tags = this.subscribe_tags
          break
        case '/homepage':
          this.tags = this.homepage_tags
          break
        case '/edituserinfo':
          this.tags = this.edituserinfo_tags
          break
        case '/setting':
          this.tags = this.setting_tags
          break
        case '/talkdetail':
          this.tags = this.talkdetail_tags
          break
        case '/about':
          this.tags = this.about_tags
          break
        case '/notify':
        case '/notify/thumbs':
        case '/notify/focus':
        case '/notify/system':
          this.tags = this.notification_tags
          break
        default:
          this.tags = []
      }

      this.$emit('getTags', this.tags)
    },
  },
}
</script>
<style scoped>
/* .item_tabs{
  width:40px
} */
</style>
